<template>
  <DraggableModal :visible="props.showModal" :title="`${props.title}版本配置`" @ok="modalOkFn" @cancel="modalCancelFn">
    <Form ref="formRef" :model="state.data" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="客户端类型" name="type">
        <a-radio-group v-model:value="state.data.type">
          <a-radio v-for="item in clientType" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="版本号" name="version">
        <Input v-model:value="state.data.version" placeholder="x.x.x" :maxlength="32" />
      </a-form-item>

      <a-form-item label="版本说明" name="note">
        <a-textarea v-model:value="state.data.note" :rows="4" :maxlength="1024" />
      </a-form-item>

      <a-form-item label="上传安装包" name="url">
        <Upload v-if="!state.data.url" accept=".apk" :show-upload-list="false" :before-upload="beforeUploadFn" :custom-request="customRequestFn">
          <Button type="primary"> 选择安装包 </Button>
        </Upload>
        <Space v-else>
          <span>{{ state.data.url }}</span>
          <span style="color: red; cursor: pointer" @click="delete state.data.url"> 删除 </span>
        </Space>
      </a-form-item>
    </Form>
  </DraggableModal>
</template>

<script setup lang="ts">
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import { message, Form, Input, Upload, Space } from 'ant-design-vue';
import { reactive, ref, watch } from 'vue';
import Button from '@/framework/components/basic/button/button.vue';
import { uploadFile } from '@/api/common/common_data';
import { upgradeAdd, upgradeUpdate } from '@/modules/platform-management/api';
import { clientType } from '../columns';

/**
 * const
 */
const props = withDefaults(
  defineProps<{
    showModal?: boolean;
    data: any;
    title: string;
  }>(),
  {
    showModal: false,
  },
);
watch(
  () => props.showModal,
  () => {
    if (props.showModal) {
      state.data = props.data;
    }
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
  (e: 'editModalOk'): void;
}>();
const formRef = ref();

/**
 * upload
 */
const beforeUploadFn = (file) => {
  if (file.size / 1024 < 51200) {
    return true;
  } else {
    message.warn('文件大小超出51.2M');
    return false;
  }
};
const customRequestFn = async (e) => {
  const formData = new FormData();
  formData.append('file', e.file);
  const res = await uploadFile(formData);
  state.data.url = res.result;
  e.onSuccess();
};

/**
 * data
 */
const state: {
  data: any;
} = reactive({
  data: {},
});
const rules = {
  type: [{ required: true, message: '数据必填!' }],
  version: [
    { required: true, message: '数据必填!' },
    {
      validator: (rule, value) => {
        if (value) {
          let state = /^[1-9]{1,2}.\d{1,2}.\d{1,2}$/.test(value);
          return state ? Promise.resolve() : Promise.reject('版本号应符合x.x.x规则');
        } else {
          return Promise.resolve();
        }
      },
    },
  ],
  url: [{ required: true, message: '数据必填!', trigger: 'change' }],
};

/**
 * modal
 */
const modalOkFn = async () => {
  try {
    await formRef.value?.validateFields();
  } catch {
    return;
  }
  let params: any = {
    version: state.data.version,
    type: state.data.type,
    note: state.data.note,
    url: state.data.url,
  };
  if (props.title === '新增') {
    await upgradeAdd(params);
  } else {
    params.id = state.data.id;
    await upgradeUpdate(params);
  }
  message.success('操作成功！');
  emits('editModalOk');
  modalCancelFn();
};
const modalCancelFn = () => {
  formRef.value?.clearValidate();
  state.data = {};
  emits('update:showModal', false);
};
</script>

<style scoped></style>
